<template>
  <div class="main main_bg">
    <gltitle :titleSize="titleSize" :is_mt="is_mt"></gltitle>
    <div class="info tac bg-fff">
      <div class="inlineb rel" @change="changeImage($event)">
        <img :src="userData.avatar === ''
          ? '../../asset/images/ico_photo.png'
        : userData.avatar" alt class="abs" />
        <div style="opacity: 0">
          <van-uploader
            multiple
            :accept="'image/*'"
            preview-size="2rem"
            :deletable="false"
            :after-read="afterRead"
          ></van-uploader>
        </div>
        <div class="abs">
          <img src="../../assets/images/ico_xj.png" alt />
        </div>
      </div>
    </div>

    <ul class="list bg-fff">
      <li class="db">
        <div class="flex">{{$t('myinfo.name')}}</div>
        <div class="str">
          <input type="text" v-model="nickname" />
        </div>
      </li>
      <li class="db">
        <div class="flex">{{$t('myinfo.sex')}}</div>
        <div class="str">
          <div class="sx db">
            <div class="s1 rel" :class="{on:datainfo.gender == '0'}" @click="max('0')">{{$t('myinfo.sex_1')}}</div>
            <div class="s2 rel" :class="{on:datainfo.gender == '1'}" @click="max('1')">{{$t('myinfo.sex_2')}}</div>
          </div>
        </div>
      </li>
      <li class="db" @click="times()">
        <div class="flex">{{$t('myinfo.brithday')}}</div>
        <div class="str">
          <input type="text" v-model="time"  readonly="readonly"/>
        </div>
        <div class="ico">
          <i class="iconfont icon-right"></i>
        </div>
      </li>
      <!-- <li class="db" @click="area_pop"> -->
      <li class="db" @click="area_pop">
        <div class="flex">{{$t('myinfo.area')}}</div>
        <div class="str">
          <input type="text" v-model="areaName" readonly="readonly"/>
        </div>
        <div class="ico">
          <i class="iconfont icon-right"></i>
        </div>
      </li>
      <li class="db" @click="tel(datainfo.mobile,datainfo.mobileAreaCode)" v-if="strLen(datainfo.mobile) > 3">
        <div class="flex">{{$t('myinfo.mobile')}}</div>
        <div class="str">
          <input type="text" v-model="datainfo.mobile" />
        </div>
        <div class="ico">
          <i class="iconfont icon-right"></i>
        </div>
      </li>
      <li class="db" @click="email(datainfo.email)" v-if="strLen(datainfo.email) > 3">
        <div class="flex">{{$t('myinfo.email')}}</div>
        <div class="str">
          <input type="text" v-model="datainfo.email" />
        </div>
        <div class="ico">
          <i class="iconfont icon-right"></i>
        </div>
      </li>
    </ul>

    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :title="$t('myinfo.choose_ymd')"
        :min-date="minDate"
        :max-date="maxDate"
        item-height=".8rem"
        @confirm="timeConf"
        :cancel-button-text="$t('word.cancle')"
        :confirm-button-text="$t('word.ok')"
      />
    </van-popup>

    <van-popup v-model="show_area" position="bottom" :style="{ height: '48%' }">
      <glArea @callback="areaSelect"> </glArea>
    </van-popup>

    <div class="container">
      <button class="btn" @click="user_up">{{$t('word.save')}}</button>
    </div>
  </div>
</template>
<script>

import { mapActions } from "vuex";

export default {
  data() {
    return {
      titleSize: this.$t("title.myinfo"),
      is_mt: true,
      datainfo: [],
      avatar: "../../assets/images/ico_photo.png",
      files: "",
      routerGo:'/member/index',

      minDate: new Date(1920, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      show: false,
      time: "",
      show_area: false,
      columns: [
        {
          values: [],
        },
        {
          values: [],
        },
        {
          values: [],
        },
      ],
      areaId: "",
      areaName: "",
      nickname:''
    };
  },

  components: {},

  created() {
    this.getinfo();

  },
  mounted(){
    this.Get_userData();
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  watch:{
    nickname(n,o){
      this.datainfo.nickname = n
    }
  },
  methods: {
    ...mapActions(["Get_userData"]),

    strLen( str ){
      if('string' != typeof str){
        return 0;
      }
      return str.length;
    },
    tel(name) {
      this.$router.push({
        path: "/member/modify_account",
        query: {
          name: name,
          code: this.userData.mobileAreaCode,
          accountType: "mobile"
        },
      });
    },
    email(name) {
      this.$router.push({
        path: "/member/modify_account",
        query: {
          name: name,
          code: "",
          accountType: "email"
        },
      });
    },

    getinfo() {
      this.datainfo = {
        areaId: this.userData.areaId,
        areaName: this.userData.areaFullName,
        birth: this.userData.birth,
        email: this.userData.email,
        gender: this.userData.gender,
        avatar: this.userData.avatar,
        id: this.userData.id,
        mobile: this.userData.mobile,
        nickname: this.userData.nickname,
      };
      this.avatar =
        this.userData.avatar === null
          ? "../../asstes/images/ico_photo.png"
          : this.userData.avatar;
      this.nickname = this.userData.nickname;
      this.areaName = this.userData.areaFullName;
      this.time = this.userData.birth == '' ? '' : this.$moment(this.userData.birth).format("YYYY-MM-DD") ;

      //
      //   this.$post(this.URL.member.currentUserInfo, {}).then((res) => {
      //   if (res.code == 0) {
      //     this.datainfo = res.data
      //     this.avatar = res.data.headImage !== 'headImage' ? '../static/images/no_photo.png':res.data.headImage
      //     this.areaName = res.data.areaName
      //     this.time = this.$moment(res.data.birth).format('YYYY-MM-DD')
      //   } else {
      //     this.$toast(res.message);
      //   }
      // });
    },
    max(name) {
      this.datainfo.gender = name;
    },
    times() {
      this.show = true;
    },

    timeConf(value) {
      this.show = false;
      this.time = this.$moment(value).format("YYYY-MM-DD");

      this.datainfo.birth = this.time;
    },

    area_pop() {
      if(null == this.areaName || undefined == this.areaName || "" == this.areaName){
        this.show_area = true;
      }
    },

    areaSelect( data ){
      this.show_area = false;
      if(null == data){
          return;
      }
      if(undefined == typeof data){
          return;
      }
      if(undefined == typeof data.areaid){
          return;
      }
      if(-1 == data.areaid){
          return;
      }

      this.datainfo.areaId = data.areaid;
      this.areaName = data.areaName;
    },

    changeImage(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      const that = this;
      reader.readAsDataURL(file);

      reader.onload = function () {
        that.userData.avatar = this.result;
      };
    },

    afterRead(file) {
      this.files = file;
      this.$post(this.URL.user.uploads,this.files,{isUpload: true}).then((res) => {
        if (res.code == 0) {
          this.datainfo.avatar = res.data.url;
        } else {
          this.$toast(res.message);
        }
      });
    },

    user_up() {
      this.$post(this.URL.user.updata, this.datainfo).then((res) => {
        if (res.code == 0) {
          this.Get_userData();
          this.$toast.success(this.$t('set_lang.set_done'));
          //this.$toast(res.message);
          this.$store.dispatch("Get_userData");
          this.$router.push("/my")
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
#app {
  .info {
    padding: 1rem 0;
    .rel {
      > img {
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 50%;
      }
      div.abs {
        right: 0;
        bottom: 0;
        img {
          height: 0.48rem;
        }
      }
    }
  }
  .list {
    padding: 0 0.3rem;
    margin: 0.2rem 0 0.48rem 0;
    font-size: 0.3rem;
    li {
      height: 1rem;
      border-bottom: 0.02rem solid #eee;
      .str {
        color: #6f7781;
      }
      .ico {
        margin-left: 0.1rem;
        i {
          font-size: 0.22rem;
        }
      }
      input {
        display: block;
        width: 100%;
        text-align: right;
        border: 0;
      }
      .sx {
        .rel {
          background: url(../../assets/images/ico_s2.png) no-repeat 0 center;
          background-size: auto 0.44rem;
          padding-left: 0.6rem;
          margin-left: 0.3rem;
          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.2;
          }
        }
        .s2 {
          background-image: url(../../assets/images/ico_s1.png);
        }
        .s1.on {
          background-image: url(../../assets/images/ico_s2_on.png);
        }
        .s2.on {
          background-image: url(../../assets/images/ico_s1_on.png);
        }
      }
    }
  }
}
</style>
